<template>
   <el-dialog
        :show-close="false"
        width="60%"
        top="80px"
    >
        <div class="tableSelect">
            <div class="tableSelect-title">转台</div>
            <div style="padding: 0 4px;">
            <div class="tableSelect-tab" >
                <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList" :key="k" @click="onChangeTab('tableSelect', k)">
                    <div>{{v.name}}</div>
                    <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                </div>
            </div>
            </div>
            
            <div class="tableSelect-main" @click="onSelectTable">
            <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode" :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">{{ v.roomName }}</div>
            <div class="tableSelect-main-item spe" data-type="up" :class="{canNotUse:usePostForm.pageIndex == 1}" @click="onChangePage">上页</div>
            <div class="tableSelect-main-item spe" data-type="down" :class="{canNotUse:freeTableList.length < usePostForm.pageSize}" @click="onChangePage">下页</div>
            </div>
            <div class="popup-btn" style="padding: 0 4px;">
                <div class="btn-cancle" @click="onCancel">取消</div>
                <div class="btn-submit" @click="onConfirm">确认</div>
            </div>
        </div>
        <ZDialog v-model="confirmShow" width="60%" title="提示" :currentRooName="currentRooName" content="是否确认转台?" @cancel="confirmShow = false" @confirm="confirmTurnTable()"></ZDialog>
    </el-dialog>
    
</template>
<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import useConfigStore from '@/store/config'
import { ElNotification } from 'element-plus'
import ZDialog from '@/components/Dialog/Dialog2.vue'
const router = useRouter()
const configStore = useConfigStore()
const props = defineProps({
    consumeCode: {
        type: String,
        default: ''
    },
    oldRoomCode: {
        type: String,
        default: ''
    },
    tableSelectShow:{
      type: Boolean,
        default: false
    }
});

const oldRoomCode = ref(props.oldRoomCode)
const consumeCode = ref(props.consumeCode)
const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const currentRooName = ref('')
const onCancel = () => {
    emits('update:show');
    emits('cancel');
}

const onConfirm = () => {
    const args = freeTableList.value[tabSelActive.value]
    currentRooName.value =  args.roomName
    if(args){
      confirmShow.value = true
      turnTableForm.value.oldRoomCode = oldRoomCode.value
      turnTableForm.value.consumeCode = consumeCode.value
      turnTableForm.value.newRoomCode = args.roomCode
    }else{
        ElNotification({
          title: '提示',
          message: '请选择桌台',
          type: 'warning',
        })
        return
    }
}
const confirmShow = ref(false)

// 转台参数
const turnTableForm = ref({
  oldRoomCode:'', // 旧桌台
  newRoomCode:'', // 新桌台
  consumeCode:'', // 消费单号
  peopleCount:'',
})

// 确认转台
const turnFlag = ref(false)
const confirmTurnTable = ()=>{
  if(turnFlag.value){
    ElNotification({
          title: '提示',
          message: '加载中，请稍等',
          type: 'success',
    })
  }
  turnFlag.value = true
  console.log(turnTableForm.value);
  Api.Common.PcObjProcess.Do({"functionName": "RoomChange","contentData":turnTableForm.value})
  .then(res=>{
      ElNotification({
          title: '提示',
          message: res.result,
          type: 'success',
        })
        router.replace({path:'/order'})
        turnFlag.value = false
  }).catch(err=>{
    turnFlag.value = false
  })
}
const tableSelectActive = ref(0)
const onChangeTab = (type,k,v) => {
  switch (type) {
    case 'tableSelect':
      tableSelectActive.value = k
      usePostForm.value.typeCode = zoneList.value[k].code
      getCanUseTables()
      break
  }
  
}
const tabSelActive = ref(0) // 选中桌台的下标
// 桌台选中切换
const onSelectTable = (e)=>{
  console.log(e.target.dataset);
  if(e.target.dataset.id){
    tabSelActive.value = e.target.dataset.id
  }
}
// 空闲桌台弹窗上下页切换
const onChangePage = (e)=>{
  console.log(e.target.dataset.type);
  if(e.target.dataset.type == 'down'){
    if(freeTableList.value.length<usePostForm.value.pageSize){
      return
    }else{
      usePostForm.value.pageIndex++
    }
    
  }else{
    if(usePostForm.value.pageIndex <= 1){
      return
    }else{
      usePostForm.value.pageIndex--
    }
  }
  getCanUseTables()
}
// 获取空闲房台
const usePostForm = ref({
  reserveTime:'',
  roomState:'0',
  typeCode:'',
  pageSize: 38,
  pageIndex: 1
})
const freeTableList = ref([])
const getCanUseTables =  (flag)=>{
  if(flag){
    usePostForm.value.pageIndex = 1
  }
  usePostForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  Api.Common.PcObjProcess.Do({"functionName": "GetReserveRoomList","orgCode": "0004","contentData":usePostForm.value})
  .then(res=>{
    freeTableList.value = res.result[0].areaRooms // 选择桌台弹窗显示的桌台
    console.log(freeTableList.value);
  })
}
// ------------------------------------------- 获取房台类型 ----------------------------------------
const zoneList = ref([])
// 获取房台类型
const getTableType = () =>{
    let newArray = [{code:'',name:'全部'}]
    Array.prototype.push.apply(newArray, configStore.zoneList)
    zoneList.value = newArray
}
getTableType() // 获取房台类型
getCanUseTables() // 获取房台
</script>
<style scoped lang="scss">
.tableSelect{
        white-space: nowrap;
        padding: 36px 52px 20px;
        .tableSelect-title{
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 20px;
            padding: 0 0 32px 8px;
        }
        .tableSelect-tab{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 42px;
            background: #F2F2F2;
            border-radius: 8px;
            // padding-left: 8px;
            .tab-item{
            padding: 15px 0px;
            width:16%;
            text-align:center;
            cursor: pointer;
            position: relative;
            &.active{
                color: #FF6A00;
            }
            .tab-item-bottom{
                position:absolute;
                bottom:4px;
                left: 50%; 
                transform: translateX(-50%); 
                width: 24px;
                height: 2px;
                background-color: #FF6A00;
                border-radius: 1px;
                display:none;
                &.active{
                display:block;
                }
            }
            }
        }
        .tableSelect-main{
            display: flex;
            align-items: center;
            justify-content: start;
            flex-wrap: wrap;
            padding-top: 20px;
            .tableSelect-main-item{
            // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
            width: calc(12.5% - 16px);
            height: 96px;
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
            line-height: 96px;
            margin: 0 8px 16px 8px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            cursor: pointer;
            &.spe{
                background: #E6E6E6;
            }
            &.active{
                background: #FFE566;
            }
            &.canNotUse{
                background: #F2F2F2;
                color: #CCCCCC;
            }
            }
        }
        .popup-btn{
                display: flex;
                align-items: center;
                justify-content: center;
                .btn-cancle{
                    text-align: center;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FF6A00;
                    line-height: 60px;
                    width: 160px;
                    height: 60px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    border: 1px solid #FF6A00;
                    margin-right: 36px;
                    cursor: pointer;
                }
                .btn-submit{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FFFFFF;
                    line-height: 60px;
                    text-align: center;
                    width: 160px;
                    height: 60px;
                    background: #FF6A00;
                    border-radius: 8px;
                    cursor: pointer;
                    }
        }
    }
</style>